<route lang="yaml">
name: home
meta:
  title: 主页
  icon: ant-design:home-twotone
</route>

<script setup lang="ts">
import type { MapProps, MapType } from 'vue3-baidu-map-gl'

const type = ref<MapType>('BMAP_NORMAL_MAP')
const mapSetting = ref<MapProps>({
  enableDragging: true,
  enableInertialDragging: true,
  enableScrollWheelZoom: false,
  enableContinuousZoom: true,
  enableResizeOnCenter: true,
  enableDoubleClickZoom: false,
  enableKeyboard: true,
  enablePinchToZoom: true,
  enableAutoResize: true,
  enableTraffic: false,
})
</script>

<template>
  <div>
    <label>
      <input v-model="mapSetting.enableScrollWheelZoom" type="checkbox">
      鼠标缩放
    </label>
    <br>
    <label>
      <input v-model="mapSetting.enableDragging" type="checkbox">
      拖拽
    </label>
    <br>
    <label>
      <input v-model="mapSetting.enableInertialDragging" type="checkbox">
      惯性拖拽
    </label>
    <br>
    <label>
      <input v-model="mapSetting.enablePinchToZoom" type="checkbox">
      双指缩放地图
    </label>
    <br>
    <label>
      <input v-model="mapSetting.enableKeyboard" type="checkbox">
      键盘操作
    </label>
    <br>
    <label>
      <input v-model="mapSetting.enableDoubleClickZoom" type="checkbox">
      双击缩放，左键双击放大、右键双击缩小
    </label>
    <br>
    <label>
      <input v-model="mapSetting.enableContinuousZoom" type="checkbox">
      双击平滑缩放效果
    </label>
    <br>
    <label>
      <input v-model="mapSetting.enableTraffic" type="checkbox">
      显示交通路况
    </label>
    <br>
    <br>
    地图类型：
    <select id="" v-model="type" name="">
      <option value="BMAP_NORMAL_MAP">
        常规地图 BMAP_NORMAL_MAP
      </option>
      <option value="BMAP_EARTH_MAP">
        地球模式 BMAP_EARTH_MAP
      </option>
      <option value="BMAP_SATELLITE_MAP">
        卫星图 BMAP_EARTH_MAP
      </option>
    </select>
    <br>
    <br>
    <BMap
      ak="05UpzezEEczsCBgeK1m2LpOcznLuyjY3"
      :map-type="type"
      :enable-dragging="mapSetting.enableDragging"
      :enable-inertial-dragging="mapSetting.enableInertialDragging"
      :enable-scroll-wheel-zoom="mapSetting.enableScrollWheelZoom"
      :enable-continuous-zoom="mapSetting.enableContinuousZoom"
      :enable-double-click-zoom="mapSetting.enableDoubleClickZoom"
      :enable-keyboard="mapSetting.enableKeyboard"
      :enable-pinch-to-zoom="mapSetting.enablePinchToZoom"
      :enable-traffic="mapSetting.enableTraffic"
    />
  </div>
</template>

<style lang="scss" scoped>
</style>
